var vm = new Vue({
    el:"#app",
    data:{
        mac:"",
        city:"",
        location:"",
        broadbander:"",
        editForm:$('#editForm')
    },
    methods:{
        /**
         * 初始化bootstrapTable
         */
        initTable:function(){
            var _this = this;
            $('#tbRouter').bootstrapTable($.extend(bootstrapTableOption,{
                url: g_comm.manager_url+'/devRouter/list',           //请求后台的URL（*）
                queryParams: _this.queryParams,               //传递参数（*）
                uniqueId: "id",                     //每一行的唯一标识，一般为主键列
                columns: [{
                    checkbox: true
                },{
                    field: 'mac',
                    title: 'Mac地址'
                }, {
                    field: 'city',
                    title: '所在城市'
                }, {
                    field: 'location',
                    title: '位置'
                }, {
                    field: 'broadbander',
                    title: '所接入运营商'
                }, {
                    field: 'accessRate',
                    title: '宽带接入速率↑↓'
                }, {
                    field: 'screenRespRate',
                    title: '首屏响应速率↑↓'
                }, {
                    field: 'videoDownloadRate',
                    title: '视频下载速率↑↓'
                }, {
                    field: 'videoDelay',
                    title: '视频首次缓冲时延↑↓'
                }, {
                    field: 'videoStuckRate',
                    title: '视频卡顿率↑↓'
                }, {
                    field: 'fileDownloadRate',
                    title: '文件下载速率↑↓'
                },{
                    field: 'updateTime',
                    title: '最后更新时间',
                    formatter:function(value,row,index){
                        if(value!=null){
                            return new Date(value).toString("yyyy-MM-dd HH:mm");
                        }else{
                            return new Date(row.createTime).toString("yyyy-MM-dd HH:mm");
                        }
                    }
                },{
                    field: '',
                    title: '操作',
                    formatter : function(value, row, index) {
                        return '<button class="opt-btn btn-success" data-id="'+row.id+'" onclick="vm.detail(this)">设备详情</button>' +
                            '<button class="opt-btn btn-warning" data-id="'+row.id+'" onclick="vm.edit(this)">编辑</button>' +
                            '<button class="opt-btn btn-danger" data-id="'+row.id+'" data-ip="'+row.ip+'" onclick="vm.speedRecord(this)">测速记录</button>';
                    }
                }
                ]
            }));
        },
        /**
         * 查询参数
         * @param params
         */
        queryParams:function (params) {
            var startTime = "";
            var endTime = "";
            if($('#rangeTime').val() != ""){
                var times = $('#rangeTime').val().split("~");
                startTime = times[0].trim() + ':00:00';
                endTime = times[1].trim() + ':59:59';
            }
            return {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                limit: params.limit,   //页面大小
                offset: params.offset,  //页码
                mac:this.mac,
                city:this.city,
                location:this.location,
                broadbander:this.broadbander,
                startTime:startTime,
                endTime:endTime
            };
        },
        /**
         * 设备详情
         * */
        detail:function (obj) {
            var id = $(obj).attr('data-id');
            $.ajax({
                url: g_comm.manager_url+"/devRouter/detail",
                data: {id:id},
                success: function(r){
                    if(r.code == 0){
                        var data = r.data;
                        //初始化详情模板
                        var getTpl = detailtpl.innerHTML
                            ,view = document.getElementById('detailAlert');
                        layui.laytpl(getTpl).render(data, function(html){
                            view.innerHTML = html;
                        });//初始化详情模板end

                        layer.open({
                            type: 1,
                            title: '设备详情',
                            shadeClose: true,
                            shade: false,
                            maxmin: true, //开启最大化最小化按钮
                            area: ['55%', '82%'],
                            content: $layui('#detailAlert'),
                            btn:['关闭']
                        });
                    }else{
                        layer.alert(r.msg,{
                            title: '提示框',
                            icon:0
                        });
                    }
                }
            });

        },//detail---end
        /**
         * 编辑
         */
        edit:function(obj){
            var id = $(obj).attr('data-id');
            this.editForm[0].reset();
            layer.open({
                type: 1,
                title: '编辑',
                shadeClose: true,
                shade: false,
                maxmin: true, //开启最大化最小化按钮
                area: ['40%', '50%'],
                content: $layui('#editAlert'),
                btn:['保存','关闭'],
                yes:function (index) {
                    if ($('#editLocation').val() == ""){
                        $('#editLocation').focus();
                        layer.tips('安装位置不能为空',$('#editLocation'),{tips: [2,'rgb(53, 149, 204)']});
                        return false;
                    }
                    if ($('#editBuyers').val() == ""){
                        $('#editBuyers').focus();
                        layer.tips('采购商不能为空',$('#editBuyers'),{tips: [2,'rgb(53, 149, 204)']});
                        return false;
                    }
                    vm.editForm.ajaxSubmit({
                        type: "PUT",
                        url: g_comm.manager_url + '/devServer/update',
                        data: {
                            "id": id
                        },
                        success: function (r) {
                            layer.alert(r.msg,{icon: 0},function () {
                                vm.search();
                                layer.closeAll();
                            })
                        }
                    });
                }
            });
        },
        /**
         * 测速记录
         * */
        speedRecord:function (obj) {
            var id = $(obj).attr('data-id');
            var ip = $(obj).attr('data-ip');
            if(ip == '' || ip == null){
                layer.msg('该路由器信息没有完善，没有测速记录');
                return;
            }
            alert(1);
        },
        /**
         * 更多查询
         * */
        more:function () {
            if($('#more span').hasClass("glyphicon-chevron-down")){
                //收起查询
                $('#more').html('<span class="glyphicon glyphicon-chevron-up"></span> 收起查询');
                $('#moreRow').show();
            }else{
                //更多查询
                $('#more').html('<span class="glyphicon glyphicon-chevron-down"></span> 更多查询');
                $('#rangeTime').val('');
                this.broadbander = "";
                $('#moreRow').hide();
            }
        },
        /**
         * 搜索
         */
        search:function () {
            $('#tbRouter').bootstrapTable('refreshOptions',{pageNumber:1});
        },
        /**
         * 批量拨测
         */
        batchDial:function () {
            layer.open({
                type: 1,
                title: '批量导入',
                shadeClose: true,
                shade: false,
                maxmin: true, //开启最大化最小化按钮
                area: ['60%', '65%'],
                content: $layui('#batchImportAlert')
            });
        },
        /**
         * 初始化时间控件
         * */
        initDate:function () {
            //日期时间范围
            layui.laydate.render({
                elem: '#rangeTime'
                ,type: 'datetime'
                ,range: '~'
                ,format:'yyyy-MM-dd HH'
                ,theme: '#393D49'
            });
        }
    },
    mounted:function () {
        this.initTable();
        this.initDate();
    }
});
